<template>
	<view class="Feedbacklist">
		<headertop title="意见反馈" str1="oridei" :back1="back1"></headertop>
		<view class="Feedbackback"> </view>
		<view class="itemboxss">
			<view class="itembox" v-for="item in  10">
				<view class="center">
					<view class="linebox">
						<view class="typebox">
							反馈类型
						</view>
						<view class="time">
							提交时间：2024-08-09 12:00:00
						</view>
					</view>
					<view class="texts">
						<view class="t1">
							这是反馈标题
						</view>
						<view class="text1">
							这是反馈内容，这是反馈内容，这是反馈内容， 这是反馈内容，这是反馈内容，这是反馈内容， 这是反馈内容，这是反馈内容，这是反馈内容， 这是反馈内容，这是反馈内容，这是反馈内容，
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref
	} from 'vue'
	const back1 = ref('')
	import {
		onPageScroll
	} from "@dcloudio/uni-app";
	
	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeeeeeeeee');
		if (e.scrollTop > 100) {
			back1.value = '#84BD78'
		} else {
			back1.value = ''
		}
	})
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.Feedbacklist {
		width: 100%;
		overflow: hidden;
		position: relative;

		.Feedbackback {
			position: absolute;
			z-index: -1;
			width: 750rpx;
			height: 278rpx;
			background: linear-gradient(180deg, #84BD78 0%, rgba(132, 189, 120, 0) 100%);
		}

		.itemboxss {
			width: 100%;
			overflow: hidden;
			margin-top: 196rpx;

			.itembox {
				width: 686rpx;
				height: 270rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				margin-bottom: 24rpx;
				overflow: hidden;

				.center {
					width: 630rpx;
					margin: auto;

					.texts {
						width: 638rpx;
						overflow: hidden;
						margin-top: 14rpx;

						.text1 {
							display: -webkit-box;
							/* 必须设置，用于多行溢出 */
							-webkit-box-orient: vertical;
							/* 设置盒子排列方向为垂直 */
							-webkit-line-clamp: 2;
							/* 限制显示的行数，例如显示 3 行 */
							overflow: hidden;
							width: 100%;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							margin-top: 16rpx;
							margin-bottom: 28rpx;
						}

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 隐藏溢出内容 */
							text-overflow: ellipsis;
							/* 超出用省略号表示 */
						}
					}

					.linebox {
						width: 100%;
						height: 94rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #F2F2F2;

						.typebox {
							width: 128rpx;
							height: 46rpx;
							background: #7EBC79;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							text-align: center;
							line-height: 46rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
							margin-left: 16rpx;
						}
					}
				}
			}
		}
	}
</style>